<template>
  <div>
    <!-- head -->
    <van-nav-bar
      title="发布房源"
      left-arrow
      class="nav_bar"
      @click-left="$router.go(-1)"
    >
    </van-nav-bar>
    <!-- head -->
    <ul>
      <!-- main -->
      <li>
        <van-cell-group border>
          <van-cell title="房源信息" />
        </van-cell-group>
      </li>
      <!-- ------------------- -->
      <li>
        <van-cell
          is-link
          @click="$router.push('/rentsearch')"
        ><span>小区名称</span>
          <span class="sp1">请输入小区名称</span>
        </van-cell>

      </li>
      <!-- ------------------ -->
      <li>
        <van-field
          v-model="rent"
          label="租金"
          placeholder="请输入租金/月"
        ><template #button>
            <van-button
              style="border: none"
              size="small"
            >¥ / 月</van-button>
          </template>
        </van-field>

      </li>
      <li>
        <van-field
          v-model="area"
          label="建筑面积"
          placeholder="请输入建筑面积"
        ><template #button>
            <van-button
              style="border: none"
              size="small"
            >m<sup>2</sup></van-button>
          </template>
        </van-field>
      </li>
      <!-- ------------------------- -->

      <li>
        <van-cell
          is-link
          @click="showPopup1"
          title="户型"
          :value="value1==''?'请选择':value1"
        />
        <van-popup
          v-model="show1"
          position="bottom"
          :style="{ height: '40%' }"
        >
        <van-picker
          show-toolbar
          :columns="columns1"
          @confirm="onConfirm1"
          @cancel="showPopup1"
        /></van-popup>

        <van-cell
          is-link
          @click="showPopup2"
          title="所在楼层"
          :value="value2==''?'请选择':value2"
        />
        <van-popup
          v-model="show2"
          position="bottom"
          :style="{ height: '40%' }"
        ><van-picker
          show-toolbar
          :columns="columns2"
          @confirm="onConfirm2"
          @cancel="showPopup2"
        /></van-popup>

        <van-cell
          is-link
          @click="showPopup3"
          title="朝向"
          :value="value3==''?'请选择':value3"
        />
        <van-popup
          v-model="show3"
          position="bottom"
          :style="{ height: '40%' }"
        ><van-picker
          show-toolbar
          :columns="columns3"
          @confirm="onConfirm3"
          @cancel="showPopup3"
        /></van-popup>
      </li>
      <!-- ------------------------- -->
      <li>
        <van-cell-group border>
          <van-cell title="房屋标题" />
        </van-cell-group>
        <van-field
          v-model="message"
          rows="2"
          autosize
          label=""
          type="textarea"
          maxlength="50"
          placeholder="请输入标题(例如：整租 小区名 2室 5000元)"
          show-word-limit
        />
      </li>
      <!-- ------------------ -->
      <li>
        <van-cell-group border>
          <van-cell title="房屋图像" />
        </van-cell-group>
        <van-uploader :after-read="afterRead" />
      </li>
      <!-- ------------------------- -->
      <li>
        <van-cell-group border>
          <van-cell title="房屋配置" />
        </van-cell-group>
        <van-grid :column-num="5">
          <van-grid-item
            icon="gift-card-o"
            text="衣柜"
          />
          <van-grid-item
            icon="delete-o"
            text="洗衣机"
          />
          <van-grid-item
            icon="hotel-o"
            text="空调"
          />
          <van-grid-item
            icon="fire-o"
            text="天然气"
          />
            <van-grid-item
            icon="refund-o"
            text="冰箱"
          />
            <van-grid-item
            icon="bar-chart-o"
            text="暖气"
          />
            <van-grid-item
            icon="tv-o"
            text="电视"
          />
            <van-grid-item
            icon="cluster-o"
            text="热水器"
          />
            <van-grid-item
            icon="desktop-o"
            text="宽带"
          />
            <van-grid-item
            icon="home-o"
            text="沙发"
          />
        </van-grid>
      </li>
      <!-- ------------ -->
      <li>
          <van-cell-group border>
          <van-cell title="房屋描述" />
        </van-cell-group>
         <van-field
          v-model="hometext"
          rows="2"
          autosize
          label=""
          type="textarea"
          maxlength="200"
          placeholder="请输入房屋描述信息"
          show-word-limit
        />
      </li>
      <!-- main -->
      <button class="btn1" @click="fn1">取消</button>
      <button class="btn2" @click="fn2">提交</button>
    </ul>
  </div>
</template>

<script>
import { gorent } from '@/api/article'
import { Toast } from 'vant'
export default {
  name: 'GoRent',
  data () {
    return {
      show1: false,
      show2: false,
      show3: false,
      value1: '',
      value2: '',
      value3: '',
      rent: '', // 租金
      area: '', // 建筑面积
      message: '', // 房屋标题
      hometext: '', // 房屋描述
      columns1: ['一室', '二室', '三室', '四室', '四室+'],
      columns2: ['高楼层', '中楼层', '低楼层'],
      columns3: ['东', '西', '南', '北', '东南', '东北', '西南', '西北']
    }
  },
  methods: {
    showPopup1 () {
      this.show1 = !this.show1
    },
    showPopup2 () {
      this.show2 = !this.show2
    },
    showPopup3 () {
      this.show3 = !this.show3
    },
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    onConfirm1 (value) {
      this.value1 = value
      this.show1 = !this.show1
    },
    onConfirm2 (value) {
      this.value2 = value
      this.show2 = !this.show2
    },
    onConfirm3 (value) {
      this.value3 = value
      this.show3 = !this.show3
    },
    onCancel () {
      Toast('取消')
    },
    // 取消
    fn1 () {
      this.$dialog.confirm({
        title: '提示',
        message: '是否确认放弃发布房源'
      })
        .then(() => {
          this.$router.push('/article')
        })
        .catch(() => {
        })
    },
    // 提交
    async fn2 () {
      if (this.message && this.rent && this.hometext && this.area) {
        const res = await gorent(
          {
            title: this.message,
            description: this.hometext,
            houseImg: '',
            oriented: '',
            supporting: '',
            price: this.rent,
            roomType: '',
            size: this.area,
            floor: '',
            community: ''
          }
        )
        console.log(res)
      } else {
        this.$toast('未录入完整信息')
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .sp1 {
    float: right;
  }
   .btn1 {
    width: 50%;
    position: absolute;
    color: #21b97a;
    background-color: #fff;
    border: none;
    left: 0;
    z-index: 999;
    height: 50px;
  }
  .btn2 {
    position: absolute;
    width: 50%;
    color: #fff;
    background-color: #21b97a;
    border: none;
    right: 0;
    z-index: 999;
    height: 50px;
  }
  .van-cell__title{
    color:#21b97a ;
  }
</style>
